<template>
  <div class="css-property">

  </div>
</template>

<style scoped>

@property --color-start {
  syntax: '<color>';
  inherits: false;
  initial-value: rgb(12, 210, 191);
}

@property --color-end {
  syntax: '<color>';
  inherits: false;
  initial-value: rgb(181, 233, 77);
}

.css-property {
  width: 300px;
  height: 300px;
  background-image: linear-gradient(var(--color-start), var(--color-end));
  animation: css-property infinite 2s alternate;
}

@keyframes css-property {
  from {
    --color-start: rgb(12, 210, 191);
    --color-end: rgb(181, 233, 77);
  }
  to {
    --color-start: rgb(198, 215, 255);
    --color-end: rgb(35, 232, 243);
  }
}
</style>
